<template>
	<view id="moments">
		<view class="home-pic">
			<view class="home-pic-base">
				<view class="top-pic">
					<image class="header" :src="my.header"></image>
				</view>
				<view class="top-name">{{my.nickname}}</view>
			</view>
		</view>

		<view class="moments__post" v-for="(post,index) in posts" :key="index" :id="'post-'+index">
			<!-- 头像 -->
			<view class="post-left">
				<image class="post_header" :src="$.getImg(post.header)"></image>
			</view>

			<view class="post_right">
				<text class="post-username">{{post.nickname}}</text>
				<view id="paragraph" class="paragraph">{{post.content}}</view>
				<!-- 相册 -->
				<view class="thumbnails">
					<view :class="post.images.length === 1?'my-gallery':'thumbnail'"
						v-for="(image, index_images) in post.images" :key="index_images">
						<image class="gallery_img" lazy-load mode="aspectFill" :src="$.getImg(image.img)"
							:data-src="$.getImg(image.img)"></image>
					</view>
				</view>
				<!-- 资料条 -->
				<view class="toolbar">
					<!-- 发动态距现在的时间 -->
					<view class="timestamp">{{mytime.timeago(post.createTime)}}</view>
					<view class="comment" @tap="comment(post.pid)">
						<image src="../../static/index/comment.png"></image>
					</view>
				</view>
				<!-- 赞／评论区 -->
				<view class="post-footer">
					<view class="footer_content" v-for="(comment,comment_index) in post.comments" :key="comment_index"
						@tap="reply(index,comment_index)">
						<text class="comment-nickname">{{comment.nickname}}: 
							<text class="comment-content">{{comment.content}}</text>
						</text>
					</view>
				</view>
			</view>
			<!-- 结束 post -->
		</view>

		<view class="foot" v-show="showInput">
			<chat-input @send-message="send_comment" @blur="blur" :focus="focus"
				:placeholder="input_placeholder"></chat-input>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>

</template>

<script>
	import chatInput from '../../components/im-chat/chatinput'; //input框
	//import postData from '../../common/pengyouquan/pengyouquan.post.data.js';//朋友圈数据

	export default {
		components: {
			chatInput
		},
		data() {
			return {
				// 我的数据
				my: {
					id: this.$.getUser("uid"),
					nickname: this.$.getUser("nickname"),
					header: this.$.getImg(this.$.getUser('header'))
				},
				// 朋友圈数据
				posts: null,

				// 评论的动态id
				index: '',
				// 回复评论的id
				comment_index: '',

				input_placeholder: '评论', //占位内容
				focus: false, //是否自动聚焦输入框
				is_reply: false, //回复还是评论
				showInput: false, //评论输入框

				screenHeight: '', //屏幕高度(系统)
				platform: '',
				windowHeight: '', //可用窗口高度(不计入软键盘)

				loadMoreText: "加载中...",
				showLoadMore: false,
			}
		},
		onLoad() {
			var flag = this.$.isLogin();
			if (!flag) return;
			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight;
					this.platform = res.platform;
				}
			});
		},
		onShow() {
			uni.startPullDownRefresh();
			// 加载朋友圈的动态
			this.queryPost();
			// 加载动态评论


		},
		onHide() {

		},
		onUnload() {
			this.max = 0,
			this.data = [],
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
		},
		//监听上拉触底事件
		onReachBottom() {
			console.log('onReachBottom');
			this.showLoadMore = true;
			setTimeout(() => {
				//获取数据
				this.loadMoreText = "暂无更多";
			}, 1000);
		},
		//监听下拉刷新动作
		onPullDownRefresh() {
			// 这里获取数据
			this.queryPost();
			setTimeout(function() {
				//初始化数据
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1000);
		},
		//监听标题栏点击事件 - 发动态
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.navigateTo('../publish/publish')
			}
		},
		methods: {
			// 获取我及我的好友的动态
			queryPost() {
				this.$.ajax({
					url: '/post/queryPost',
					data: {
						uid: this.my.id
					},
					success: (res) => {
						console.log("获取到朋友圈的动态...", res);
						this.posts = res;
					}
				})
			},
			
			// 跳转页面的方法
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			//调起input框
			comment(index) {
				this.showInput = true;
				this.focus = true;
				this.index = index;
			},
			//当弹出软键盘发生评论动作时,调整页面位置pageScrollTo
			adjust() {
				return;
				uni.createSelectorQuery().selectViewport().scrollOffset(res => {
					var scrollTop = res.scrollTop;
					let view = uni.createSelectorQuery().select("#post-" + this.index);
					view.boundingClientRect(data => {
						console.log("data:" + JSON.stringify(data));
						console.log("手机屏幕高度:" + this.screenHeight);
						console.log("竖直滚动位置" + scrollTop);
						console.log("节点离页面顶部的距离为" + data.top);
						console.log("节点高度为" + data.height);
						console.log("窗口高度为" + this.windowHeight);

						uni.pageScrollTo({
							scrollTop: scrollTop - (this.windowHeight - (data.height + data.top +
								45)), //一顿乱算
							// scrollTop: 50, 
							duration: 300
						});
					}).exec();
				}).exec();
			},
			// reply(index, comment_index) {
			// 	this.is_reply = true; //回复中
			// 	this.showInput = true; //调起input框
			// 	let replyTo = this.posts[index].comments.comment[comment_index].username;
			// 	this.input_placeholder = '回复' + replyTo;
			// 	this.index = index; //post索引
			// 	this.comment_index = comment_index; //评论索引
			// 	this.focus = true;
			// },
			blur: function() {
				this.init_input();
			},
			// 评论/回复
			send_comment: function(message) {
				if (this.is_reply) {
					// 回复的消息
					var reply_username = this.posts[this.index].comments.comment[this.comment_index].username;
					var comment_content = '回复' + reply_username + ':' + message.content;
				} else {
					// 评论的消息
					var content = message.content;
					this.$.ajax({
						url: '/comment/addComment',
						type: 'POST',
						data: {
							uid: this.my.id,
							pid: this.index,
							content: content
						},
						success: (res) => {
							this.queryPost();
						}
					})
				}
				/* this.posts[this.index].comments.total += 1;
				this.posts[this.index].comments.comment.push({
					"uid": this.user_id,
					"username": this.username,
					"content": comment_content //直接获取input中的值
				}); */
				this.init_input();
			},
			init_input() {
				this.showInput = false;
				this.focus = false;
				this.input_placeholder = '评论';
				this.is_reply = false;
			}
		}
	}
</script>

<style scoped>
	@import url("../../common/pengyouquan/pengyouquan.css");
	
	#moments {
		padding-bottom: 55px;
	}
	
	.uni-loadmore {
		text-align: center;		color: gray;
	}
</style>